<script setup>

import {nextTick, onMounted, onUnmounted, ref} from "vue";
import {getOrderInfoById, getOrderListByStatus, payOrderById} from "@/api/order/order.js";
import {ElMessage} from "element-plus";

// 0表示正常，1表示已经支付成功，2表示超时结束，3表示取消订单
const orderStatus = ref(null)
// 0表示正常，1表示已经支付成功，2表示超时结束，3表示取消订单
const aOrderStatus = ref(null)
// 转圈标识
const loading = ref(false)
// 订单列表
const orderList = ref(false)


onMounted(() => {
  loading.value = true

  // 发请求订单的请求
  getOrderListByStatus(orderStatus.value).then((res) => {
    // 把转圈的标志取消掉
    loading.value = false
    orderList.value = res.data


  })



})

const orderStatuses = [
    {index: null, title: '所有订单'},
    {index: 0, title: '待付款'},
    {index: 1, title: '已完成'},
    {index: 2, title: '已过期'},
    {index: 3, title: '已取消'},
]
const switchOrderStatus = (index) => {
  orderStatus.value = index
  loading.value = true

  // 发请求订单的请求
  getOrderListByStatus(orderStatus.value).then((res) => {
    // 把转圈的标志取消掉
    loading.value = false
    orderList.value = res.data


  })

}
const openOrderInfo = (item) => {
  goodInfo.value = item

  getOrderInfoById(item.id).then((res) => {
    // 开始计时器
    startCountdown(res.data.endTime)
    // 创建后返回的创建订单信息
    aOrderStatus.value = res.data.status

    // 根据这个状态设置失效值，只有status为1的时候为true
    // 把失效重置
    expire.value = aOrderStatus.value == 0 ? false : true

    // 再弹出一个支付的弹出层
    payPop.value = true
  })


}


// 支付弹出层显示
const payPop = ref(false)


// 倒计时字符串
const countdown = ref('00:00')
// 倒计时字符串
const countdownMinute = ref('0')
// 订单是否失效
const expire = ref(true)
// 定时器ID
const timerId = ref()
// 商品信息
const goodInfo = ref()
function startCountdown(endTime) {
  timerId.value = setInterval(() => {
    const end = new Date(endTime)
    const now = new Date();
    const diff = end - now;

    // 如果时间到了或已经过了，停止倒计时
    if (diff <= 0) {
      clearInterval(timerId.value);
      countdown.value = '00:00';
      countdownMinute.value = 0
      expire.value = true
      // 如果过了时间要将按钮变成灰色
      return;
    }

    // 计算分钟和秒
    const minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60));
    const seconds = Math.floor((diff % (1000 * 60)) / 1000);

    // 格式化并更新倒计时
    countdown.value = `${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
    countdownMinute.value = minutes
  }, 1000); // 每秒更新一次
}
onUnmounted(() => {
  // 组件销毁前清除定时器
  if (timerId.value) {
    clearInterval(timerId.value);
  }
})
const closeCountDown = () => {
  if (timerId.value) {
    clearInterval(timerId.value);
    countdown.value = '00:00';
    countdownMinute.value = 0
  }
}
const payOrder = (orderId) => {
  if (expire.value || orderId == null) return;

  const data = {
    orderId: orderId
  }
  payOrderById(data).then((res) => {
      ElMessage.success(res.message)
  })

}
</script>

<template>
  <div class="top">
    <h2 align="center">用来扩展一些功能</h2>
  </div>
  <div class="container">
    <div class="left-side">
      <em>全部功能</em>
      <span class="hover">我的购物车</span>
      <span class="hover">我的订单</span>
      <span class="hover">我的收藏</span>
    </div>

    <div class="main">
      <div class="order-container">
        <div class="order-container-top">
          <div style="display: flex;border-bottom: 3px solid #e8e8e8;width: 100%">
            <div style="position: relative;bottom: -3px;cursor:pointer;padding: 0 20px 12px;" v-for="(item,index) in orderStatuses" :class="{ 'order-focus' : orderStatus === item.index }" @click="switchOrderStatus(item.index)">
              {{ item.title }}
            </div>
          </div>
        </div>

        <div v-loading="loading" class="order-list">

          <div style="margin-bottom: 50px;height: 45px;line-height: 45px;display: flex;font-size: 15px;color: #3c3c3c;border: 1px solid rgb(232, 232, 232);background: #f3f3f4">
            <div style="width: 593px;text-align: center">商品</div>
            <div style="width: 185px;text-align: center">订单总额</div>
            <div style="width: 141px;text-align: center">订单状态</div>
            <div style="width: 269px;text-align: center">操作</div>
          </div>

          <div class="order-item" v-for="(item, index) in orderList">
            <div class="order-top">
              <div>订单号：{{ item.id }}</div>
            </div>
            <div style="display: flex;padding: 30px 0">
              <div style="width: 563px;color: #333333;padding-left: 30px;display: flex">
                <img style="box-shadow: 0 0 5px 5px #f1f1f1" width="140" height="140" :src="item.cover">
                <p class="hover" style="font-size: 15px;padding-top: 3px;padding-left: 15px">{{ item.title }}</p>
              </div>
              <div style="width: 185px;display: flex;flex-direction: column;justify-content: center;align-items: center">
                <p style="font-weight: bold">{{ item.salePrice }}<span v-if="item.payType == 0">元</span><span v-else>积分</span></p>
                <p style="text-decoration: line-through;color: #5d5d5d">{{ item.originPrice }}<span v-if="item.payType == 0">元</span><span v-else>积分</span></p>
              </div>


              <div style="width: 141px;text-align: center;display: flex;align-items: center">
                <span style="width: 141px;" v-if="item.status === 0">未支付</span>
                <span style="width: 141px;" v-if="item.status === 1">已支付</span>
                <span style="width: 141px;" v-if="item.status === 2">已超时</span>
                <span style="width: 141px;" v-if="item.status === 3">已取消</span>
                <span style="width: 141px;" v-if="item.status === 4">订单发生异常</span>
              </div>


              <div style="width: 269px;display: flex;justify-content: space-around;align-items: center">
                <el-button @click="openOrderInfo(item)">订单详情</el-button>
                <el-button>删除订单</el-button>
              </div>

            </div>
          </div>
        </div>




      </div>

    </div>
  </div>

  <el-dialog style="background: #f2f2f2;border-radius: 8px" v-model="payPop" @close="closeCountDown" width="600">
    <template #header>
      <div style="padding: 10px 25px 0;">
        <h2 style="white-space: pre;font-size: 26px">
          <pre v-if="aOrderStatus === 0">待支付,  剩余 <span style="color: #f82855">{{ countdown }}</span></pre>
          <pre v-else-if="aOrderStatus === 1">订单已支付成功</pre>
          <pre v-else-if="aOrderStatus === 2">订单已过期</pre>
          <pre v-else-if="aOrderStatus === 3">订单已被取消</pre>
          <pre v-else-if="aOrderStatus === 4">订单出现异常，请联系管理员</pre>
        </h2>
        <div style="font-size: 14.5px;color: #676767;padding: 3px 0">超过{{ countdownMinute }}分钟未支付，订单将自动取消</div>

      </div>
    </template>
    <div style="background: white;border-radius: 10px;padding: 25px 18px 20px;">

      <div style="display: flex;color: black;">
        <img style="border-radius: 8px" :src="goodInfo.cover" width="100" height="100">
        <div>
          <div style="width: 300px;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;padding: 8px 0 0 15px;font-family: 微軟正黑體,serif;font-weight: bold;font-size: 19px">{{ goodInfo.title }}</div>
          <div style="font-size: 17px;font-family: 'Nirmala UI',sans-serif;font-weight: bold;padding: 40px 0 0 15px;">
            <small v-if="goodInfo.payType === 0" style="font-size: 12px">￥</small>
            <svg v-else-if="goodInfo.payType === 1" style="position: relative;top: 2px" t="1725952614505" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3544" width="16" height="16"><path d="M509.892478 1017.613571C229.33666 1017.613571 1.085693 789.362604 1.085693 508.806786S229.33666 0 509.892478 0s508.806786 228.250967 508.806786 508.806786S790.384433 1017.613571 509.892478 1017.613571z m0-910.321567a401.961831 401.961831 0 0 0-401.578645 401.578646c0 221.481352 180.097293 401.64251 401.578645 401.64251s401.514781-180.097293 401.514782-401.64251a401.897967 401.897967 0 0 0-401.514782-401.578646z" fill="#F2D857" p-id="3545"></path><path d="M509.189971 800.985905L231.12486 516.215043l284.89859-278.065112 278.001248 284.898591-284.834727 277.937383zM344.867157 517.620057l165.663964 169.751279 169.62355-165.663964-165.472371-169.815143-169.815143 165.727828z" fill="#EFB82E" p-id="3546"></path></svg>
            {{ goodInfo.originPrice }}
          </div>
        </div>
      </div>

      <p style="color: #1e1e1e;margin-top: 15px;font-size: 15px">周一至周日可用 · 随时退 · 过期自动退 · 免预约</p>
      <p style="color: #1e1e1e;margin-top: 4px;font-size: 15px">可赠送好友</p>

    </div>
    <div style="margin-top: 10px;background: white;border-radius: 10px;padding: 15px 18px 20px;">
      <h2 style="font-size: 21px" v-if="goodInfo.payType === 0">应付金额 ￥{{ goodInfo.salePrice }}</h2>
      <h2 style="font-size: 21px" v-if="goodInfo.payType === 1">应付积分
        {{ goodInfo.salePrice }}
      </h2>
      <div style="display: flex;justify-content: space-between;padding-right: 50px;font-size: 14px;color: #464646;">
        <div>
          <div style="margin: 10px 0 7px;">订单编号</div>
          <div>下单时间</div>
          <div style="margin-top: 7px">支付方式</div>
        </div>
        <div style="width: 300px;text-align: left">
          <div style="margin: 10px 0 7px;">{{ goodInfo.id }}</div>
          <div>{{ goodInfo.startTime }}</div>
          <div style="margin-top: 7px">
            <span v-if="goodInfo.payType === 0">人民币支付</span>
            <span v-if="goodInfo.payType === 1">积分支付</span>
          </div>
        </div>
      </div>
    </div>

    <template #footer>
      <div style="display: flex;border-radius: 0 0 8px 8px;margin: 50px -16px -16px;padding: 16px;background: white;justify-content: space-between;align-items: center;color: #e53865">
        <span style="font-weight: bold;">
          <small style="font-weight: normal;display: inline-block;margin-right: 1px">实付</small>
          <span style="font-size: 22px;position: relative;top: 1px">{{ goodInfo.salePrice }} </span>
          <span v-if="goodInfo.payType === 0" style="font-size: 17px"> 元</span>
          <span v-else-if="goodInfo.payType === 1" style="font-size: 17px"> 积分</span>
        </span>
        <div v-if="goodInfo.salePrice !== goodInfo.originPrice" style="padding-bottom: 2px;padding-left: 10px;text-decoration: line-through;color: #7c7c7c" >{{ goodInfo.originPrice }}</div>

        <div @click="payOrder(goodInfo.id)" class="btn-commitOrder" :class="{ 'btn-expire': expire }">去支付</div>
      </div>
    </template>


  </el-dialog>


</template>

<style scoped>
.main {
  width: 1190px;
}
.btn-expire {
  background: linear-gradient(to right, #5b5b5b, #777777)!important;
  cursor: not-allowed!important;
}
.order-item {
  border: 1px solid #daf3ff;
  margin-bottom: 15px;
}
.order-item:hover {
  border: 1px solid #aed8ff;
}
pre {
  font-family: 微软雅黑,serif;
}
.btn-commitOrder {
  background: #e8435a;
  cursor: pointer;
  color: white;
  font-size: 17px;
  padding: 12px 55px;
  border-radius: 8px;
}
.order-top {
  border-bottom: 1px solid #daf3ff;
  display: flex;
  height: 45px;
  line-height: 50px;
  font-size: 14.5px;
  background: #eaf8ff;
  padding-left: 40px;
  color: #333333;
}
.order-container {

}
.order-container-top {
  height: 70px;
  display: flex;
  align-items: center;
}
.order-focus {
  border-bottom: 3px solid #ff3c00;
}
.left-side em {
  font-size: 17px;
}
.left-side span {
  font-size: 15px;
}
.top {
  color: white;
  height: 80px;
  line-height: 80px;
  padding: 0 calc(50vw - 650px);
  background: #ff5900
}
.container {
  width: 1300px;
  padding: 25px calc(50vw - 650px) 0;
  font-family: "pingfang SC", poppin, Arial, 微软雅黑, sans-serif;
  display: flex;
}
.left-side {
  display: flex;
  flex-direction: column;
  width: 110px;
}
.left-side>* {
  height: 30px;
  line-height: 30px;
}
</style>
